<template>
  <div>
    <a-row v-for="(row, index) in rows" :key="index">
      <a-col v-for="(col, index) in row.cols" :key="index" :span="col.span">
        <template v-if="col.rows && col.rows.length > 0">
          <view-layout-row :rows="col.rows" :height="height" :editable="editable" v-on="$listeners" :groupId="groupId"></view-layout-row>
        </template>
        <view-layout-tab v-else-if="col.tabs && col.tabs.length > 0" :editable="editable" :col="col" :cols="row.cols"
                         :currentHeightTab="currentHeightTab"
                         @selectViewOk="selectViewOk" :groupId="groupId"></view-layout-tab>
        <template v-else>
          <div :style="{height: currentHeight}" class="viewColClass">
            <span v-if="editable">{{col.viewItem}}</span><br/>
            <view-layout-item v-if="editable" :view-item="col.viewItem" :cols="row.cols"
                              :changeTabNameFlg="false" @selectViewOk="selectViewOk" :groupId="groupId"></view-layout-item>
          </div>
        </template>
      </a-col>
    </a-row>
  </div>
</template>

<script>

  import ViewLayoutTab from './ViewLayoutTab';
  import ViewLayoutItem from './ViewLayoutItem';

  export default {
    name: "ViewLayoutRow",
    components: {
      ViewLayoutTab,
      ViewLayoutItem
    },
    props: {
      rows: {
        type: Array,
        default: () => []
      },
      height: Number,
      editable: Boolean,
      groupId: {
        type: String,
        required: true
      },
    },
    data() {
      return {}
    },
    computed: {
      currentHeight() {
        return this.rows.length == 0 ? '0px' : ((this.height / this.rows.length) + 'px');
      },
      currentHeightTab() {
        return this.rows.length == 0 ? '0px' : ((this.height / this.rows.length) - 60 + 'px');
      }
    },
    methods: {
      selectViewOk(formData) {
        this.$emit("selectViewOk", formData);
      }
    }
  }
</script>
<style>
  .viewColClass {
    border: grey 1px solid;
    padding: 10px;
    text-align: center;
  }
</style>